<template>
  <div class="order-list">
    <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
      <div class="card" v-for="(item, index) in orderLists" :key="index" v-if="orderLists.length">
        <div @click="getOrderDetail(item)">
          <div class="cardTop">
            <div class="cardTitle">{{ item.scenicName }}</div>
            <div class="cardStatus">{{ item.status == 0 ? '待付款' : item.status == 1 ? '待使用' : item.status == 2 ? '已使用' :
              item.status == 3 ? '退款' : '已取消' }}</div>
          </div>
          <div class="cardcontent">
            <img :src="baseURL + item.fileList[0].filePath" alt="">
            <div>
              <div class="cardName">{{ item.ticketName }}</div>
              <!-- <div class="cardTime">{{ item.time }}</div> -->
              <div class="cardLabel">
                <span v-for="items in item.scenicLabel.split(',')" :key="items">
                  {{ scenic_label_type[items].label }}
                </span>
              </div>
            </div>
          </div>
          <div class="cardPrice">合计：<i style="">￥</i><span>{{ item.actualAmount }}</span></div>
        </div>
        <div class="cardBtn">
          <span class="cardBtn1" @click="getcancelOrder(item)">{{ item.status == 0 ? '取消订单' : item.status == 4 ? '删除订单'
            :
            '再来一单' }}</span>
          <span class="cardBtn2" @click="getOrderDetail(item)">{{ item.status == 0 ? '待支付' : item.status == 1 ?
            '去使用' : '查看详情' }}</span>
        </div>
      </div>
      <van-empty :image="empty" image-size="200" description="暂无数据" v-if="!orderLists.length && loading == false" />

    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, getCurrentInstance } from "vue";
import { showSuccessToast, showConfirmDialog } from "vant";
import { getOrderList, cancelOrder, delOrder } from "@/services/home";
import empty from "@/assets/empty.png";
import { useRouter } from "vue-router";
import { baseURL } from '@/utils/request'
const { proxy } = getCurrentInstance();
const { scenic_label_type } = proxy.useDict("scenic_label_type");
const router = useRouter();
const total = ref();
const loading = ref(false);
const finished = ref(false);
const pageNum = ref(1);
const props = defineProps({
  status: Number,
});
const orderLists = ref([])
const getOrderDetail = (item: any) => {
  router.push({
    path: '/notify/orderDetail',
    query: {
      id: item.id,
    }
  })
}
const getOrder = () => {
  getOrderList({ status: props.status === 6 ? '' : props.status }).then((res) => {
    if (res.code == 200) {
      console.log(res.rows)
      orderLists.value = res.rows
    }
  })
}
const getcancelOrder = (e) => {
  if (e.status == 0) {
    showConfirmDialog({
      // title: '标题',
      message:
        '确定取消该订单吗？',
    })
      .then(() => {
        cancelOrder({ orderId: e.id }).then(res => {
          if (res.code == 200) {
            showSuccessToast('取消成功')
            getOrder()
          }
        })
      })
      .catch(() => {
        // on cancel
      });
  } else if (e.status == 4) {
    showConfirmDialog({
      // title: '标题',
      message: '确定删除该订单吗？',
    })
      .then(() => {
        delOrder(e.id).then(res => {
          if (res.code == 200) {
            showSuccessToast('删除成功')
            getOrder()
          }
        })
      })
      .catch(() => {

      })
    // } else if (e.status == 1) {
  } else {
    router.push({
      path: '/home/detail?id=' + e.scenicId,
      query: {
        id: e.scenicId
      }
    })
  }
}
const onLoad = () => {
  getOrderList({ status: props.status === 6 ? '' : props.status, pageNum: pageNum.value++ }).then(res => {
    if (res.code == 200) {
      console.log("props.status::", props.status);
      sessionStorage.setItem('managerTab', props.status)

      orderLists.value = orderLists.value.concat(res.rows)
      total.value = res.total
      // 加载状态结束
      loading.value = false;
      // 数据全部加载完成
      if (orderLists.value.length >= total.value) {
        finished.value = true;
      }
    }
  })

};
</script>

<style lang="scss" scoped>
.order-list {
  width: 100%;

  .card {
    width: 350px;
    height: 210px;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    color: #000;

    .cardTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 10px 0 10px;

      .cardTitle {
        font-size: 16px;
        font-weight: 600;
      }

      .cardStatus {
        font-size: 12px;
        color: var(--cp-primary)
      }
    }

    .cardcontent {
      display: flex;
      padding: 10px 10px 0 10px;

      img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
      }

      >div {
        margin-left: 10px;

        .cardName {
          margin-top: 5px;
          font-weight: 600;
        }

        .cardTime {
          margin-top: 5px;

          color: var(--cp-tag);

        }

        .cardLabel {
          margin-top: 5px;

          >span {
            border-radius: 2px;
            color: var(--cp-tag);
            font-size: 12px;
            margin-right: 7px;
          }
        }
      }
    }

    .cardPrice {
      margin-top: 8px;
      margin-right: 10px;
      text-align: right;
      color: var(--cp-primary);

      >i {
        font-style: normal;
      }

      >span {
        font-size: 17px;
        font-weight: 800;
        color: var(--cp-primary);
      }
    }

    .cardBtn {
      text-align: right;
      margin-top: 15px;
      margin-right: 10px;

      .cardBtn1 {
        border-radius: 47px;
        padding: 7px 7px;
        border: 1px solid var(--cp-tip);
        color: var(--cp-tip);
        margin-right: 5px;

      }

      .cardBtn2 {
        border-radius: 47px;
        color: var(--cp-primary);
        border: 1px solid var(--cp-primary);
        padding: 7px 10px;
      }
    }
  }
}
</style>